<template>
  <!--地区码配置-->
  <section class="page system-log">
    <data-form :model="userModel" @onSearch="refreshData" :page="pageService" :rules="rules">
      <template slot="inputs">
        <el-form-item label="大区名称" prop="areaName">
          <el-input v-model.trim="userModel.areaName" clearable></el-input>
        </el-form-item>
        <el-form-item label="大区码" prop="areaCode">
          <!-- <el-select v-model="userModel.areaCode" size="small" clearable="">
            <el-option v-for="{index,name,code} in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code">
            </el-option>
          </el-select> -->
          <el-input v-model.trim="userModel.areaCode" clearable></el-input>
        </el-form-item>
      </template>
    </data-form>
    <!--数据列区域-->
    <data-box :data="dataList" :page="pageService" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="getDetail('add')">添加</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="操作">
          <template slot-scope="scope">
            <el-button @click="getDetail('see', scope)" type="text">查看</el-button>
            <el-button @click="getDetail('edit',scope)" type="text">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="大区名称" prop="areaName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="大区码" prop="areaCode"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="创建时间" prop="createTime">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | dateTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(2)" label="创建人" prop="operatorRealName">
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(2)" label="编辑人" prop="updateName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="编辑时间" prop="updateTime">
          <template slot-scope="scope">
            <span>{{scope.row.updateTime | dateTimeFormat}}</span>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <el-dialog :center="true" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialog.commissionedDialog" title="大区自定义配置" @close="closeDialog">
      <add-area :caseRow.sync="caseRow" @close="dialog.commissionedDialog=false; caseRow = {}" @refreshData="refreshData" ref="refresh" :type="type"></add-area>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { UserService } from '~/services/management-service/user.service'
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import { State, Getter } from "vuex-class";
import CommissionedDialog from '~/components/outsource-manage/commissioned-manage/commissioned-dialog.vue'
import AddArea from "~/components/system-manage/area-code/add-area.vue"

@Layout("workspace")
@Component({
  components: {
    CommissionedDialog,
    AddArea
  }
})
export default class SystemLog extends Vue {
  @Dependencies(UserService)
  private userService: UserService
  @Dependencies(PageService) private pageService: PageService;
  private rules: any = {
    areaCode: [{ validator: this.$validator.numAndEn, trigger: "change" }]
  };
  private dataList: any[] = []
  private caseRow: any = {} //查看或编辑某一条row
  private dialog: any = {
    commissionedDialog: false
  }
  private type: string = ''

  private userModel: any = {
    areaName: '',
    areaCode: '',
  }
  public refreshData() {
    this.dialog.commissionedDialog = false
    this.userService.getAllAreaConfigInfo(this.userModel, this.pageService).subscribe(data => {
      this.dataList = data
    })
  }
  
  /**
   * 增加-修改-查看
   */
  private getDetail(type, scope) {
    this.type = type
    this.caseRow = {}
    if (type === 'add') {
      this.dialog.commissionedDialog = true
    } else {
      this.userService.getRegionalConfigById({ id: scope.row.id }).subscribe((data) => {
        this.caseRow = data
        this.dialog.commissionedDialog = true
      })
    }
  }
  private mounted() {
    this.refreshData();
  }
  /**
   * 重置numberRange
   */
  private follFeedback() {
  }

  private closeDialog() {
    this.caseRow = {}
  }
}
</script>

<style lang="less">
.block {
  .el-range-separator {
    line-height: 15px !important;
  }
}
</style>

